<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01保存和恢复绘图状态</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		// 3, 绘制图形
		// 红色矩形
		context.shadowBlur = 10;
		context.shadowColor = 'black';
		context.shadowOffsetX = 10;
		context.shadowOffsetY = 10;
		context.fillStyle = "red";
		context.save();// 保存绘图状态
		context.fillRect(30, 30, 200, 100);
		// 绿色矩形
		context.shadowBlur = 10;
		context.shadowColor = 'red';
		context.shadowOffsetX = 10;
		context.shadowOffsetY = 10;
		context.fillStyle = "green";
		context.save();// 保存绘图状态
		context.fillRect(330, 30, 200, 100);
		// 蓝色矩形
		context.shadowBlur = 10;
		context.shadowColor = 'yellow';
		context.shadowOffsetX = 10;
		context.shadowOffsetY = 10;
		context.fillStyle = "blue";
		context.save();// 保存绘图状态
		context.fillRect(630, 30, 200, 100);
		
		
		
		// 蓝色矩形
		context.restore();// 恢复绘图状态
		context.fillRect(30, 180, 200, 100);
		// 绿色矩形
		context.restore();// 恢复绘图状态
		context.fillRect(330, 180, 200, 100);
		// 红色矩形
		context.restore();// 恢复绘图状态
		context.fillRect(630, 180, 200, 100);
		
		
		// 色矩形
		context.restore();// 恢复绘图状态
		context.fillRect(30, 310, 200, 100);
		// 色矩形
		context.restore();// 恢复绘图状态
		context.fillRect(330, 310, 200, 100);
		// 色矩形
		context.restore();// 恢复绘图状态
		context.fillRect(630, 310, 200, 100);
		
		/*
		 * 绘图状态: 描述某一时刻 2d渲染上下文 外观的整套属性(从简单的颜色值到复杂的变换矩阵及其他特征)
		 * 
		 * 用于描述绘图状态的整套属性为: 变换矩阵, 裁剪区域, globalAlpha, strokeStyle, fillStyle, lineWidth, lineCap, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, font, textAlign, globalCompositeOperation
		 * 
		 * save() 方法: 保存绘图状态
		 * restore() 方法: 恢复绘图状态
		 * 
		 * 保存和恢复绘图状态的实现原理: save 时将绘图状态保存在 绘图状态栈(先进后出), 然后 restore 时从绘图状态栈中取值(取的是后被保存的值) 
		 */
		
		
	</script>
</html>
